<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="filter-container">
      <el-select class="filter-item" style="width: 120px;" @change="research" v-model="query.status" placeholder="选择状态"
        filterable clearable>
        <el-option value="1" label="不合格"></el-option>
        <el-option value="2" label="已解除"></el-option>
      </el-select>
      <el-input style="width: 200px;" placeholder="输入查询关键字按回车" clearable prefix-icon="el-icon-search"
        class="filter-item" @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
      <el-date-picker @change="research" class="filter-item" style="width: 230px;" v-model="query.daterange"
        type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"
        :picker-options="datePickerOption">
      </el-date-picker>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>

    </div>
    <div style="margin-bottom: 5px">
      <el-button type="warning" size="mini" v-permission="'fuelCell.edit'" v-show="multipleSelection.length" plain
        @click="release">解除不良
      </el-button>
    </div>
    <el-table v-loading="tableLoading" :data="list" style="width: 100%" :border="true"
      @selection-change='selectionChange'>
      <el-table-column type="selection" width="55" :selectable='selectable'>
      </el-table-column>
      <el-table-column v-for="(v,index) in columns" :label="v.title" :prop="v.key" :width="v.width" :key="index">
        <template slot-scope="scope">
          <div v-if="v.key == 'ng_status'">
            <span class="text-label" :class="scope.row[v.key] == 1 ? 'bg-gray' : 'bg-green'">
              {{scope.row[v.key] == 1?'不合格':'已解除'}}
            </span>
          </div>
          <div v-else>
            {{scope.row[v.key]}}
          </div>
        </template>
      </el-table-column>
    </el-table>

    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'fuelCell',
  data: function () {
    return {
      name: '子电堆材料不良记录',
      api: this.$api.fuelCell,
      multipleSelection: [],
      columns: [
        { title: '料号', key: 'key_part_no', width: 110 },
        { title: '料名', key: 'key_part_name', width: 120 },
        { title: '条码', key: 'sn', width: 180 },
        { title: '状态', key: 'ng_status', width: 110 },
        { title: '解除原因', key: 'release_reason' },
        { title: '不通过原因', key: 'ng_reason' },
        { title: '测试时间', key: 'create_time', width: 150 },
        { title: '修改人', key: 'modify_user' },
        { title: '最后修改', key: 'modify_time', width: 150 },
      ],
      tableProps: {
        border: true,
        //opsColWith: 140, //不定义默认80
        hideOperations: true,
      },
      query: {
        page: 1,
        size: 10,
        queryString: null,
        status: null,
        daterange: [],
      },
      datePickerOption: {
        shortcuts: [
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '当月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const end = today
              const start = dateTools.first_day(today)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '上月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const start = dateTools.first_day(dateTools.add_month(today, -1))
              const end = dateTools.last_day(start)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '上上月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const start = dateTools.first_day(dateTools.add_month(today, -2))
              const end = dateTools.last_day(start)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
    }
  },
  methods: {
    selectionChange(val) {
      this.multipleSelection = val
    },
    selectable(row, index) {
      if (row.ng_status == 1) {
        return true
      } else {
        return false
      }
    },
    formatQuery(query) {
      let tmp = _.cloneDeep(query)
      if (tmp.daterange) {
        tmp.begintime = tmp.daterange[0]
        tmp.endtime = tmp.daterange[1]
        delete tmp.daterange
      }
      return tmp
    },
    release() {
      this.$prompt('请输入解除原因', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then((v) => {
          const { value } = v
          // let data = this.multipleSelection.filter((i) => i.ng_status == 1)
          let ids = this.multipleSelection.map((i) => i.id)
          this.$request(this.api + 'release', { release_reason: value, ids }, 'post').then((r) => {
            this.$message.success('解除成功')
            this.getList()
          })
        })
        .catch((e) => {})
    },
  },
  created: function () {
    this.getList()
  },
  watch: {},
}
</script>

<style scoped>
</style>
